{% extends 'base.html' %}
{% block title %}
    {{ html_title }}
{% endblock title %}

{% block head %}
    {# 加载sidebar的CSS #}
    {% load static %}
    <link rel="stylesheet" href="{% static "css/sidebar.css"%}">
{% endblock head %}
{% block js %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    {% load static %}
    <script src="{% static "js/chart_functions.js" %}"></script>
{% endblock js %}
{% block body %}
<div class="row" id="body-row">
    <div class="col-sm-3 col-md-2 sidebar">
          <ul class="sidebar-nav">
              {% for sidebar in sidebar_list %}
                  {# 判断当前Rack是不是Active Rack,如果是CSS会调整颜色 #}
                  {% if sidebar.0 == active_sidebar %}
                    <li class="active">
                        <a href="{{ sidebar.1 }}">{{ sidebar.0 }}</a>
                    </li>
                  {% else %}
                      <li><a href="{{ sidebar.1 }}">{{ sidebar.0 }}</a></li>
                  {% endif %}
              {% endfor %}
          </ul>
    </div>
    <div class="col-sm-9 col-md-10 main">
        <br><h2 style="color: #666666">内存利用率</h2>
        <div class="card text-center">
          <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
              {# 设备选择标签卡 #}
              {% for device in devices_list %}
                  {% if device.name == current %}
                  <li class="nav-item">
                    {# 会把当前设备current设置为active的选择卡 #}
                    <a class="nav-link active" href="/device_monitor/mem/{{ device.id }}">{{ device.name }}</a>
                  </li>
                  {% else %}
                  <li class="nav-item">
                    <a class="nav-link" href="/device_monitor/mem/{{ device.id }}">{{ device.name }}</a>
                  </li>
                  {% endif %}
              {% endfor %}
            </ul>
          </div>
          <div class="card-body">
              <div class='row'>
                  <div class='col col-md-1'>
                  </div>
                  <div class='col col-md-8'>
                    {# CPU利用率线性图出现的位置 #}
                    <canvas id="chart"></canvas>
                  </div>
                  <div class='col col-md-1'>
                  </div>
              </div>
          </div>
        </div>
    </div>
</div>
{# 绘制CPU利用率线性图的JS #}
{# 重点: 如果返回的结果为字符串, 为了防止JS转码, 需要使用"|safe"来防止转码 #}
<script type="text/javascript" language="javascript">
    chart_line('chart', "{{ current }} 内存利用率", {{ mem_time|safe }}, {{ mem_data }}, ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d']);
</script>
{% endblock body %}
